<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/mui.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/register.css" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<title></title>
	</head>

	<body id='zbody'>
		<div class='gray'>
			<span class='text'>手机号码*</span>
		</div>
		<div class='white'>
			<input id='number' placeholder="请输入手机号" maxlength="11" class='texttwo' />
			<span id='erroe' class='erroe'>格式不正确</span>
		</div>
		<div class='gray'>
			<span class='text'>验证码*</span>
		</div>
		<div class='white'>
			<input style="width: 130px;" id='code' placeholder="请输入验证码(6位)" maxlength="6" class='texttwo' onkeyup="value=value.replace(/[^\d]/g,'')" />
			<span class='code'>获取验证码</span>
		</div>
		<div class='gray'>
			<span class='text'>密码*</span>
		</div>
		<div class='white'>
			<input id='password' type='password' maxlength="16" placeholder="请输入密码(6~16位)" class='texttwo' />
			<span id='erroe1' class='erroe'>密码位数太少</span>

		</div>
		<div class='gray'>
			<span class='text'>重新输入密码*</span>
		</div>
		<div class='white'>
			<input id='pass' type='password' maxlength="16" placeholder="请输入密码(6~16位)" class='texttwo' />
			<span id='erroe2' class='erroe'>密码不一致</span>
		</div>
		<div class='gray'>
			<span class='text'>昵称*</span>
		</div>
		<div class='white' id='white'>
			<input id="nickName" placeholder="请输入昵称" class='texttwo' />
		</div>
		<div class='bottom'>

			<div id='register'>
				<span id='clause'>注册并同意KoreaComics的<span id='tiaokuan'>使用条款</span>及<span id='people'>个人信息注册</span></span>
				<div id='zregister' style="background-color: green;">注册</div>
			</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/url.js"></script>
		<script>
			/*
						 如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
						 * */
			$.noConflict();

			jQuery('input').blur(function() {
				var zphone = /1[3-8][0-9]{9}/;

				if(zphone.test(document.getElementById("number").value) &&
					document.getElementById("number") != null) {
					document.getElementsByClassName("code")[0].addEventListener("tap", function() {
						jQuery.ajax({
							type: 'post',
							url: serverip.ip + '/register/phonecheck',
							data: {
								'phone': document.getElementById("number").value
							},
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							success: function() {
								alert("提交成功");
							},
							error: function() {
								alert("提交失败");
							}
						});
					});

					var wait = 60;

					function time(obj) {
						if(wait == 0) {

							obj.removeAttribute("disabled");
							obj.innerHTML = '输入验证码';
							wait = 60;
						} else {
							obj.setAttribute("disabled", true);
							obj.textContent = "重新发送验证码（" + wait + "s)";

							wait--;
							setTimeout(function() {
								time(obj);
							}, 1000)
						}
					}

					jQuery(".code").bind("tap", function() {
						time(this);
					});

				}

			});

			jQuery('input').blur(function() {
				var zphone = /1[3-8][0-9]{9}/;
				var zpassword = /[A-Za-z0-9_]{6,16}/;
				if(zphone.test(document.getElementById("number").value) &&
					zpassword.test(document.getElementById("password").value) &&
					document.getElementById("pass").value == document.getElementById("password").value &&
					document.getElementById("number").value != null &&
					document.getElementById("password").value != null &&
					document.getElementById("pass").value != null &&
					document.getElementById("code").value != null &&
					document.getElementById("nickName").value != null) {

					document.getElementById("zregister").addEventListener("tap", function() {
						jQuery.ajax({
							type: 'post',
							dataType: 'json',
							url: serverip.ip + '/register/phone',
							data: {
								"account": document.getElementById("number").value,
								"checkCode": document.getElementById("code").value,
								"password": document.getElementById("password").value,
								"nickname": document.getElementById("nickName").value
							},
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							success: function(data) {
								if(data==1){
									mui.openWindow({
										url:'login.html'
									})
								}
							}
						});
					});

				}
			});
		</script>

		<script type="text/javascript">
			/*手机正则验证*/
			var zphone = /1[3-8][0-9]{9}/;
			document.getElementById("number").addEventListener("tap", numbertwo);

			function numbertwo() {
				var phone = document.getElementById("number").value;
				if(phone == "请输入手机号") {
					document.getElementById("number").style.color = "black";
					document.getElementById("number").value = "";
				}
				if(document.getElementById("number").value == "") {
					document.getElementById("number").style.color = "black";
				}
			}

			document.getElementById("number").addEventListener("blur", number);

			function number() {
				var phone = document.getElementById("number").value;
				if(phone == "") {
					document.getElementById("number").style.color = "red";
					document.getElementById("number").value = "请输入手机号";
				}
				if(phone != "" && phone != "请输入手机号") {
					if(!zphone.test(phone)) {
						document.getElementById("erroe").style.display = "block";
					}
				}
				if(zphone.test(phone)) {
					document.getElementById("erroe").style.display = "none";
				}
			}
			/*密码正则验证*/
			var zpassword = /[A-Za-z0-9_]{6,16}/;
			document.getElementById("password").addEventListener("blur", password1);

			function password1() {
				var password = document.getElementById("password").value;
				if(!zpassword.test(password) && password != "请输入密码(6~16位)") {
					if(password != '') {
						document.getElementById("erroe1").style.display = "block";
					}
				}
				if(password == "") {
					document.getElementById("password").type = "text";
					document.getElementById("password").style.color = "red";
					document.getElementById("password").value = "请输入密码(6~16位)";
					document.getElementById("erroe1").style.display = "none";
				}
				if(zpassword.test(password)) {
					document.getElementById("erroe1").style.display = "none";
				}
			}

			document.getElementById("password").addEventListener("tap", password);

			function password() {
				var password = document.getElementById("password").value;
				if(password == "请输入密码(6~16位)") {
					document.getElementById("password").type = "password";
					document.getElementById("password").style.color = "black";
					document.getElementById("password").value = "";
				}
			}

			document.getElementById("pass").addEventListener("blur", pass);

			function pass() {
				var password = document.getElementById("password").value;
				var pass = document.getElementById("pass").value;
				if(pass == "") {
					document.getElementById("pass").type = "text";
					document.getElementById("pass").style.color = "red";
					document.getElementById("pass").value = "请输入密码(6~16位)"
					document.getElementById("erroe2").style.display = "none";
				}
				if(pass != "" && pass != "请输入密码(6~16位)") {
					if(password != pass) {
						document.getElementById("erroe2").style.display = "block";
					}
				}
				if(password == pass) {
					document.getElementById("erroe2").style.display = "none";
				}
			}

			document.getElementById("pass").addEventListener("tap", pass1);

			function pass1() {
				var pass = document.getElementById("pass").value;
				if(pass == "请输入密码(6~16位)") {
					document.getElementById("pass").type = "password";
					document.getElementById("pass").style.color = "black";
					document.getElementById("pass").value = "";
				}
			}
		</script>

	</body>

</html>